/*1为表单form绑定submit事件
* 2输入内容回车后触发该事件
* 3定义事件触发后ol todolist的装填
* 4为每个list的叉绑定click删除事件
* 5定义删除click事件触发后的条目的删除
* 6条目总数的更新*/
$(function () {//用来限制变量的作用域，将所有事件事件内部，一级调用函数表达式。
    //为表单绑定submit事件,先定义变量，在function下的局部变量
    var $todoForm = $('#todoForm');//定义表单对象，将表单对象存储到todoForm中
    var $todoInput = $('#todoInput');//文本域内容存储在todoInput中,#todoInput来自jsp中的id
    var $todoList = $('#todoList');//接收和定义jsp中id为todolist的列表内容，下面就可以直接对$todoLlist进行赋值
    var $todoCount = $('#todoCount');
    //计算ol下有多少条记录
    function count() {
        var len = $todoList.children().length;//获取todolist标签下的长度
        $todoCount.html(len >0 ? '总计' + len + '项todo list': '');//将统计信息装填到ol中
    }
    $todoForm.submit(function (e) {
        e.preventDefault();
        //获得文本域中的内容，将内容填装到todolist的列表里
        var input_value = $todoInput.val();
        //对todolist进行赋值，用jq的append方法，文本内容放入list后为每个后面添加一个a链接
        $todoList.append('<li>' + input_value + '&nbsp;<a href="#" class="todoDelete">x</a> </li>');
        $todoInput.val('');//内容装填完后将文本输入框填空
        count();
    });
    $todoList.on('click','.todoDelete',function (e) {//删除list中的内容
        $(this).parent().remove();
        count();
    });

});